<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="../assets/css/normalize.css" /> -->
<link rel="stylesheet" type="text/css" href="../assets/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/lrtk.css" />

<style type="text/css">
	.mui-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;background-color: rgba(0,0,0,0.5);}
	#cn-wrapper .tb-rl{font-size: 14px; writing-mode: tb-rl;}
</style>
</head>
<body onload="openNav()" onclick="closeNav()" v-clock>
<!-- <body> -->

<div id="my_main_control_menu" class="component">
	<button class="cn-button" id="cn-button">+</button>
	<div class="cn-wrapper" id="cn-wrapper">
		<ul>
			<li v-for="(item, index) in icons" v-bind:key="index">
				<a class="mui-tab-item" href="javascript:;" target="_blank" v-on:tap="openproject(item)">
					<span class="mui-icon tb-rl" v-bind:class="item.icon">{{item.title}}</span>
					<span class="mui-tab-label "></span>
				</a>
			</li>
			<!-- <li><a href="javascript:;" target="_blank"><span class="icon-picture"></span></a></li>
			<li><a href="javascript:;" target="_blank"><span class="icon-headphones"></span></a></li>
			<li><a href="javascript:;" target="_blank"><span class="icon-home"></span></a></li>
			<li><a href="javascript:;" target="_blank"><span class="icon-facetime-video"></span></a></li>
			<li><a href="javascript:;" target="_blank"><span class="icon-envelope-alt"></span></a></li> -->
		 </ul>
	</div>
	<div id="cn-overlay" class="cn-overlay"></div>
</div><!-- container -->
<script src="../assets/js/modernizr-2.6.2.min.js"></script>
<script src="../assets/js/lib/mui.min.js"></script>
<script src="../assets/js/lib/jquery-1.8.3.min.js"></script>
<script src="../assets/js/polyfills.js"></script>
<script src="../assets/js/lib/vue.min.js"></script>
<script>
	var _self = {};
	var _eventBus = my_main_control_menu = new Vue({
		el: "#my_main_control_menu",
		name: 'main_control_menu',
		// template: '#main_control_menu', 
		components: {
			// 'main_chat': httpVueLoader('../components/main_control_menu.vue')
		},
		store: shop_store,
		router: shop_router,
		data: function() {
			return {title: 'Main_Control_Menu', //native_top
				icons: [{
					url: "../../video/pages/index.html",
					id: "video/pages/index.html",
					icon: "icon-facetime-video",
					title: "影音"
				},{
					url: "../../shop/pages/index.html",
					id: "shop/pages/index.html",
					icon: "icon-headphones",
					title: "购物"
				},{
					url: "../../news/pages/index.html",
					id: "news/pages/index.html",
					icon: "icon-picture",
					title: "资讯"
				},{
					url: "../../chat/pages/index.html",
					id: "chat/paegs/index.html",
					icon: "icon-home",
					title: "社交"
				},{
					url: "../../travel/pages/index.html",
					id: "travel/pages/index.html",
					icon: "icon-envelope-alt",
					title: "旅游"
				}]
			}
		},
		methods: {
			openproject: function(item) {
				mui.openWindow({
					url: item.url,
					id: item.url,
					waiting:{
						autoShow:false
					},
					show:{
						aniShow:'pop-in'
					}
				})
				return;
			}
		}
	});
	
	var button = document.getElementById('cn-button'),
	wrapper = document.getElementById('cn-wrapper'),
	overlay = document.getElementById('cn-overlay');
	
	//open and close menu when the button is clicked
	var open = false;
	button.addEventListener('click', handler, false);
	wrapper.addEventListener('click', cnhandle, false);
	
	function cnhandle(e){
		e.stopPropagation();
	}
	
	function handler(e){
		if (!e) var e = window.event;
	 	e.stopPropagation();//so that it doesn't trigger click event on document
	
	  	if(!open){
	    	openNav();
	  	}
	 	else{
	    	closeNav();
	  	}
	}
	function openNav(){
		open = true;
	    button.innerHTML = "-";
	    classie.add(overlay, 'on-overlay');
	    classie.add(wrapper, 'opened-nav');
	}
	function closeNav(){
		open = false;
		button.innerHTML = "+";
		classie.remove(overlay, 'on-overlay');
		classie.remove(wrapper, 'opened-nav');
	}
	document.addEventListener('click', closeNav);
	// $(document).ready(function(){
	// 	openNav();
	// })
</script>

</body>
</html>